<template>
  <div id="starMap">
    <div ref="radar" class="radar" :mapData="mapData"></div>
  </div>
</template>

<script>
export default {
  name: "starMap",
  components: {},
  props: {
    mapData: Array | Object,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRadar();
  },

  methods: {
    // 星图
    drawRadar() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = that.$echarts.init(that.$refs.radar);
      // 数据
      let dataArr = that.mapData;
      // console.log('dataArr',that.starMapHints)
      // 指定图表的配置项和数据
      let option = {
        title: {
          // text:'雷达图'
        },
        // 图表的位置
        grid: {
          position: "center",
        },
        radar: {
          // 缩放 解决文字被盖住的问题
          radius: "65%",
          indicator: [
            {
              text: `${dataArr[0]}\n传播指数`,
              max: 100,
            },
            {
              text: `${dataArr[1]}\n合作指数`,
              max: 100,
            },
            {
              text: `${dataArr[2]}\n涨粉指数`,
              max: 100,
            },
            {
              text: `${dataArr[3]}\n性价比指数`,
              max: 100,
            },
            {
              text: `${dataArr[4]}\n种草指数`,
              max: 100,
            },
          ],
          // 富文本rich调indicator样式
          name: {
            formatter: function (value, indicator) {
              let str1 = value.split("\n")[0];
              let str2 = value.split("\n")[1];
              let str = `{a|${str1}}` + `\n` + `{b|${str2}}`;
              return str;
            },
            rich: {
              a: {
                align: "center",
                // lineHeight: 20,
                color: "#222222",
                fontSize: "18",
                fontFamily: "DINAlternate-Bold",
                // fontWeight:'bold'
              },
              b: {
                align: "center",
                // lineHeight: 20,
                fontSize: "14",
                color: "#888888",
              },
            },
            textStyle: {
              color: "rgba(102,102,102,1)",
              backgroundColor: "#fff",
              borderRadius: 3,
              // padding: [3, 5],
            },
          },
          //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
          splitArea: {
            show: false,
            areaStyle: {
              color: "rgba(255,0,0,0)", // 图表背景的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#efefef", // 设置网格的颜色
            },
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: "#e5e5e5",
            },
          },
        },
        series: [
          {
            name: "星图",
            type: "radar",
            data: [
              {
                // value: [75, 80, 85, 70, 78],
                value: that.mapData,
                name: "星图指数",
                areaStyle: {}, //范围是一片区域
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "#febf95",
                    lineStyle: {
                      color: "#febf95",
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option);
    },
  },
};
</script>
<style lang='less' scoped>
#starMap {
  width: 100%;
  height: 100%;
  .radar {
    width: 100%;
    height: 100%;
  }
}
</style>